/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import type {ReactNode} from 'react';
import React, {useEffect, useState} from 'react';
import {ScrollView, View, Text, StatusBar, Appearance} from 'react-native';
import {useBreakpointValue} from '@hadss/react_native_adaptive_layout';
import {Cell, Header, Title} from '../components';

const SCAN = require('../../assets/common/icon_scan.png');

interface NavInfo {
  id: string;
  text: string;
}

const HomePage = ({navigation}): ReactNode => {
  const [colorScheme, setColorScheme] = React.useState(Appearance.getColorScheme());

  useEffect((): (() => void) => {
    const subscription = Appearance.addChangeListener(({colorScheme}) => {
      setColorScheme(colorScheme);
    });
    return (): void => subscription.remove();
  }, []);

  const paddingHorizontal = useBreakpointValue<number>({
    base: 16,
  });

  const marginBottom = useBreakpointValue<number>({
    base: 0,
  });

  const data = [
    {
      id: 1,
      title: '场景一',
      type: 'title',
      children: [
        {
          id: 'grid',
          text: '网格布局',
        },
      ],
    },
    {
      id: 2,
      title: '场景二',
      type: 'title',
      children: [
        {
          id: 'flex',
          text: '拉伸布局',
        },
      ],
    },
    {
      id: 3,
      title: '场景三',
      type: 'title',
      children: [
        {
          id: 'modal',
          text: '模态弹窗',
        },
      ],
    },
    {
      id: 4,
      title: '场景四',
      type: 'title',
      children: [
        {
          id: 'split',
          text: '分屏布局',
        },
      ],
    },
    {
      id: 5,
      title: '场景五',
      type: 'title',
        children: [
        {
          id: 'background',
          text: '背景氛围',
        },
      ],
    },
    {
      id: 6,
      title: '场景六',
      type: 'title',
        children: [
        {
          id: 'player',
          text: '播放器',
        },
      ],
    },
    {
      id: 7,
      title: '场景七',
      type: 'title',
        children: [
        {
          id: 'pic',
          text: '相机',
        },
      ],
    },
    {
      id: 8,
      title: '场景八',
      type: 'title',
        children: [
        {
          id: 'navigation',
          text: '自适应导航',
        },
      ],
    },
  ];

  const columnGap = useBreakpointValue<number>({
    base: 0,
  });

  const rowGap = useBreakpointValue<number>({
    base: 12,
  });

  const flexDirection = useBreakpointValue<string>({
    base: 'column',
  }) as 'column' | 'row';

  const navPage = (info: NavInfo): void => {
    navigation.navigate(info.id);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: colorScheme === 'dark' ? '#000' : 'rgba(241, 243, 245, 1)',
        paddingHorizontal,
        paddingTop: 44,
      }}>
      <StatusBar barStyle={'dark-content'} />
      <Header title="首页" icon={{width: 40, height: 40, source: SCAN}} colorScheme={colorScheme} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        showVerticalScrollIndicator={false}
        style={{flex: 1, backgroundColor: colorScheme === 'dark' ? '#000' : 'rgba(241, 243, 245, 1)'}}>
        {data.map((item) => {
          return (
            <View key={item.id}>
              <Title marginBottom={marginBottom} title={item.title} colorScheme={colorScheme} />
              <View style={{rowGap, columnGap, flexDirection}}>
                {item.children.map((i) => {
                  return (
                    <Cell
                      key={i.id}
                      title={i.text}
                      onPress={(): void => navPage(i)}
                      flexDirection={flexDirection}
                      colorScheme={colorScheme}
                    />
                  );
                })}
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};
export default HomePage;
